<script setup lang="ts">
import { ref, watch } from 'vue';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
defineOptions({
  name: 'CodeUiConfigForm'
});

interface Props {
  /** the edit row data */
  table: Api.Model;
}

const props = defineProps<Props>();

const { formRef, validate, restoreValidation } = useNaiveForm();
const form = ref<Api.Model>({ id: 0 });

type RuleKey = Extract<keyof Api.Model, 'userName' | 'status'>;
const { defaultRequiredRule } = useFormRules();
const rules: Record<RuleKey, App.Global.FormRule> = {
  userName: defaultRequiredRule,
  status: defaultRequiredRule
};

/** 监听 table 属性，复制给 formData 属性 */
watch(
  () => props.table,
  table => {
    form.value = table;
  },
  {
    deep: true,
    immediate: true
  }
);

defineExpose({
  validate: async () => validate(),
  restoreValidation: async () => restoreValidation()
});
</script>

<template>
  <NForm ref="formRef" :model="form" :rules="rules">
    <NDivider title-placement="left">表格配置</NDivider>
    <NGrid responsive="screen" cols="4">
      <NFormItemGi class="pr-12px" label="表格可编辑" path="tableEditable">
        <PorDictRadio v-model:value="form.tableEditable" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="表格标题" path="tableTitle">
        <NInput v-model:value="form.tableTitle" placeholder="表格标题" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="是否分页" path="tablePaginate">
        <PorDictRadio v-model:value="form.tablePaginate" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="分页大小" path="tablePageSize">
        <NInput v-model:value="form.tablePageSize" placeholder="分页大小" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="表格宽度" path="tableWidth">
        <NInput v-model:value="form.tableWidth" placeholder="表格宽度" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="表格高度" path="tableHeight">
        <NInput v-model:value="form.tableHeight" placeholder="表格高度" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="调整列宽" path="tableAdjustWidth">
        <PorDictRadio v-model:value="form.tableAdjustWidth" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="左侧固定列" path="tableLeftFix">
        <NInput v-model:value="form.tableLeftFix" placeholder="左侧固定列" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="右侧固定列" path="tableRightFix">
        <NInput v-model:value="form.tableRightFix" placeholder="右侧固定列" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="排序列" path="tableSortFieldId">
        <PorTreeSelect
          v-model:value="form.tableSortFieldId"
          :url="`/dev/code/codeColumn/simpleList?tableId=${form.id}`"
          value-to-number
          clearable
        ></PorTreeSelect>
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="排序方法" path="tableSortMethod">
        <PorDictSelect v-model:value="form.tableSortMethod" dict-code="common_sort_method" clearable />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="开启导入" path="enableImport">
        <PorDictRadio v-model:value="form.enableImport" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="开启导出" path="enableExport">
        <PorDictRadio v-model:value="form.enableExport" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="开启添加" path="enableAdd">
        <PorDictRadio v-model:value="form.enableAdd" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="开启删除" path="enableDel">
        <PorDictRadio v-model:value="form.enableDel" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="开启刷新" path="enableRefresh">
        <PorDictRadio v-model:value="form.enableRefresh" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="开启排序初始化" path="enableInitSort">
        <PorDictRadio v-model:value="form.enableInitSort" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="开启选择列" path="enableCheck">
        <PorDictRadio v-model:value="form.enableCheck" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
    </NGrid>
    <NDivider title-placement="left">表单配置</NDivider>
    <NGrid responsive="screen" cols="4">
      <NFormItemGi class="pr-12px" label="是否抽屉" path="drawer">
        <PorDictRadio v-model:value="form.drawer" dict-code="common_true_false" value-to-bool />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="表单宽度" path="formWidth">
        <NInput v-model:value="form.formWidth" placeholder="表单宽度" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="表单高度" path="formHeight">
        <NInput v-model:value="form.formHeight" placeholder="表单高度" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="表单列数" path="formColCount">
        <NInput v-model:value="form.formColCount" placeholder="表单列数" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="表单列比列" path="formColProportion">
        <NInput v-model:value="form.formColProportion" placeholder="表单列比列" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="控件样式" path="formElementStyle">
        <NInput v-model:value="form.formElementStyle" placeholder="控件样式" />
      </NFormItemGi>
      <NFormItemGi class="pr-12px" label="控件比例" path="formElementProportion">
        <NInput v-model:value="form.formElementProportion" placeholder="控件比例" />
      </NFormItemGi>
    </NGrid>
  </NForm>
</template>

<style scoped></style>
